<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>03_计算属性和监视</title>
    </head>
    <body>
        <!--
      1. 计算属性
        在computed属性对象中定义计算属性的方法
        在页面中使用{{方法名}}来显示计算的结果
        **有两种形式：
                1.只可读，不可写，
                    写成函数的形式 eg:fullName(){return }
                 要有返回值，使用直接写函数名，自己会调用好返回return结果返回到页面上
                2.可读可写。
                    使用get()和set()方式
                    get()里面写的和可读写的方式一样
                    set()可写，里面可以不用写返回值

      2. 监视属性:
        通过通过vm对象的$watch()或watch配置来监视指定的属性
        当属性变化时, 回调函数自动调用, 在函数内部进行计算
         一开始不执行，只有数据发生变化了才会执行
            watch:{
                 监听数据：(newVal,preVal)=>{
                    console.log(newVal,preVal)
                 }
            }
      3. 计算属性高级:
        通过getter/setter实现对属性数据的显示和监视
        计算属性存在缓存, 多次读取只执行一次getter计算
    -->
        <div id="app">
            姓: <input type="text" placeholder="First Name" v-model="firstName" /><br />
            名: <input type="text" placeholder="Last Name" v-model="lastName" /><br />
            姓名1: <input type="text" placeholder="Full Name1" v-model="fullName1" /><br />
            姓名2: <input type="text" placeholder="Full Name2" v-model="fullName2" /><br />
            <p>{{count}}</p>
            <button @click="update">count+1</button>
            <p>{{person.age}}</p>
            <button @click="updateAge">age数据变化</button>
        </div>
        <script type="text/javascript" src="../js/vue.js"></script>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                    firstName: '李',
                    lastName: '沛华',
                    count: 0,
                    person:{
                        age:20
                    }
                },
                //    fullName要展示完整,用计算
                // computed,有两种计算方式1.只可读，写函数的形式2.可读可写
                // 数据代理 ：data、computed,methods出现的数据都是在this上
                methods: {
                    update() {
                        this.count = this.count + 1
                    },
                    updateAge(){
                        this.person.age=this.person.age+1
                    }
                },
                computed: {
                    // 可读
                    fullName1() {
                        return this.firstName + ' ' + this.lastName
                    },
                    // 可读可写
                    fullName2: {
                        get() {
                            return this.firstName + ' ' + this.lastName
                        },
                        // 可通参数value获取到当前的值
                        set(value) {
                            const [firstName, lastName] = value.split(' ')
                            this.firstName = firstName
                            this.lastName = lastName
                        },
                    },
                },
                // 监听数据变化
                watch:{
                    // 这个写法是一开始是不监听，之后就会监听数据
                    count:function (newVal,preVal){
                        console.log(newVal,preVal);
                        
                    },
                    // 对象类型浅层对比，需要deep:true,
                    person:{
                        handler(newVal,preVal){
                            console.log(newVal,preVal);
                            deep:true
                            // 一开始就监听数据
                            immediate:true
                            
                        }
                    }

                }
            })
        </script>
    </body>
</html>
